<template>
	<view v-show="!loading">
		<z-paging :fixed="true" ref="paging" v-model="dataList" @query="queryList">
			<view v-if="dataList.length > 0">
				<view class="wrap-list">
					<view class="presdete_top">
						<view class="presdete_top_item d-s-c word-box-hover" v-for="(item, index) in dataList" :key="index" @tap="getVoice(index)">
							<wordTip class="tip" :item="item"></wordTip>
							<view class="ww40 f36 fb">
								{{ item.word }}
							</view>
							<view class="ww40 f36 fb">
								<view v-if="(currentIndex==index && clickTimes==2) || item.check">{{ item.chinese }}</view>
							</view>
							<view class="d-e-c">
								<view class="presdete_top_item_box1 d-c-c mr20" :class="{'checked':item.check==1}" @click.stop="wordCheck(index, 1)">
									<u-icon name="checkmark" color="#fff" size="36"></u-icon>
								</view>
								<view class="presdete_top_item_box2 d-c-c" :class="{'checked':item.check==2}" @click.stop="wordCheck(index, 2)">
									<u-icon name="close" color="#fff" size="36"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="presdete_bot d-b-c tc">
					<view class="presdete_bo" style="">
						<view class="">
							<u-badge :count="count" :offset="[-20, -30]"></u-badge>
						</view>
						<view class="f30 gray9">
							<view class="f32 fb" style="color: #387BEF;">{{ listlong }}</view>
							<view class="gray9">总条数</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import wordTip from '@/pages/components/wordTootip.vue'
	export default {
		components:{wordTip},
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				loading: true,
				count: 0,
				ids: '',
				knowIds: '',
				dataList: [],
				listlong: 0,
				currentIndex: -1,
				clickTimes: 0,
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 2000)
				return false
			}
		},
		methods: {
			// 选择单词
			wordCheck(i, n) {
				if (this.dataList[i].check == n) {
					this.dataList[i].check = 0
				} else {
					this.dataList[i].check = n
					if(i < this.dataList.length - 1) {
						let audio = this.dataList[i+1].audio_url
						this.playAudio(audio)
					}
				}
				let count = 0
				let idArray = []
				let knowIdArray = []
				for (let j=0;j<this.dataList.length;j++) {
					let words = this.dataList[j]
					if (words.check == 1) {
						knowIdArray.push(words.word_id)
					}
					if (words.check == 2) {
						count += 1
						idArray.push(words.word_id)
					}
				}
				this.count = count
				this.ids = idArray.join(',')
				this.knowIds = knowIdArray.join(',')
			},
			playAudio(audio) {
				if (audio) {
					this.utils.playAudio(audio)
				}
			},
			queryList(pageNo, pageSize) {
				this.$u.post(this.$u.api.notStudyList, {
					pageNo: pageNo,
					pageSize: pageSize,
					voiceType:this.$store.state.voiceType,
				}).then((res) => {console.log(res)
					if (res.code == 1) {
						let data = res.data
						this.listlong = data.total
						for (let i=0;i<data.data.length;i++) {
							data.data[i].show = false
							data.data[i].check = 0
						}
						this.$refs.paging.complete(data.data)
					} else {
						this.$refs.paging.complete(false)
					}
					this.loading = false
				}).catch((err) => {
					this.$refs.paging.complete(false)
					this.loading = false
				})
			},
			// 获取单词音频
			getVoice(i) {
				// this.dataList[i].show = true
				this.$u.post(this.$u.api.wordVoice, {
					word: this.dataList[i].word,
					type: this.$store.state.voiceType
				}).then((res) => {
					this.utils.playAudio(this.imgUrl + res.data)
				}).catch((err) => {
					console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	::v-deep .u-empty {
		height: 80vh !important;
	}
	
	.presdete_top {
		// padding-bottom: 20rpx;
	}

	.presdete_top_item {
		width: 92%;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding: 45rpx 30rpx;
		box-sizing: border-box;
	}
	
	.presdete_top_item_box1.checked {
		background: linear-gradient(250deg, #5BA9FF, #2B87F7) !important;
	}

	.presdete_top_item_box2.checked {
		background: linear-gradient(250deg, #F85548, #F77B2D) !important;
	}

	.presdete_bot {
		width: 100%;
		background-color: #ffffff;
		height: 12vh;
		padding: 0 54rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
	}
	.presdete_bot_but{
		width: 216rpx;
		height: 7vh;
		background: linear-gradient(90deg, #1F93FF, #387BEF);
		border-radius: 40rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 7vh;
	}
	.presdete_bo{
		position: relative
	}
	.presdete_top_item_box1,.presdete_top_item_box2 {
		width: 66rpx;
		height: 66rpx;
		border-radius: 50%;
		background: linear-gradient(250deg, #999999, #C8C4C4);
	}
	.presdete_top_item_box1.checked {
		background: #02e411;
	}
	.presdete_top_item_box2.checked {
		background: #f50735;
	}
</style>
